<template>
    <div>
        <el-table
            ref="multipleTable"
                v-loading="loading"
                :data="dataList"
                :highlight-current-row="highlightCurrentRow"
                :header-cell-style="headerCellStyle"
                stripe
                style="width: 100%"
                @row-click="onRowClick"
                @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column v-for="(item, i) in columns"
                             :key="i"
                             :prop="item.key"
                             :label="item.title"
                             :width="item.width"
                             :fixed="item.fixed"
                             :align="item.align"
                             :render-header="item.headRender"
                             :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <TableColumnExpand
                            v-if="item.render"
                            :render="item.render"
                            :row="scope.row"
                            :index="i"
                            :column="item">
                    </TableColumnExpand>
                    <span v-else>{{scope.row[item.key]}}</span>
                </template>
            </el-table-column>

        </el-table>

    </div>
</template>

<script>
    import TableColumnExpand from '@/components/TableColumnExpand';

    export default {
        name: 'Table2',
        components: {
            TableColumnExpand
        },
        props: {
            data: {
                type: Array,
                default() {
                    return [];
                }
            },
            columns: {
                type: Array,
                default() {
                    return [];
                }
            },
            loading: {
                type: Boolean,
                default() {
                    return false;
                }
            },
            highlightCurrentRow: {
                type: Boolean,
                default() {
                    return false;
                }
            },
            headerCellStyle: {
                type: Object,
                default() {
                    return {};
                }
            }
        },
        mounted() {
            this.$nextTick(() => {
                //this.$emit("onPageSizeChange", this.pageSize);
            });
        },
        watch: {
            data: {
                handler: function (newVal) {
                    this.dataList = newVal;
                },
                deep: true,
                immediate: true
            }
        },
        data() {
            return {
                dataList: [],
            }
        },
        methods: {
          handleSelectionChange(val) {
            this.multipleSelection = val;
            this.$emit("on-selection-change", this.multipleSelection);
          },
          onRowClick(val) {
            this.$emit("on-row-click", val);
          }
        }
    }
</script>
